<template>
  <div id="nav">
    <div>
      <button>
        <router-link to="/">Home</router-link>
      </button>
      <button>
        <router-link to="/about">About</router-link>
      </button>
      <button>
        <router-link to="/useOverflow">useOverflow</router-link>
      </button>
    </div>
    <div>
      <button>
        <router-link to="/useCssVar">useCssVar</router-link>
      </button>
      <button>
        <router-link to="/useFullscreen">useFullscreen</router-link>
      </button>
      <button>
        <router-link to="/useUrlSearchParams?tab=tab2">useUrlSearchParams</router-link>
      </button>
    </div>
    <div>
      <button>
        <router-link to="/onKeyStroke">onKeyStroke</router-link>
      </button>
      <button>
        <router-link to="/useIdle">useIdle</router-link>
      </button>
    </div>
    <div>
      <button>
        <router-link to="/useInterval">useInterval</router-link>
      </button>
    </div>
    <div>
      <button>
        <router-link to="/useStorage">useStorage</router-link>
      </button>
      <button>
        <router-link to="/createGlobalState">createGlobalState</router-link>
      </button>
    </div>
    <div>
      <button>
        <router-link to="/computedInject">computedInject</router-link>
      </button>
      <button>
        <router-link to="/unrefElement">unrefElement</router-link>
      </button>
      <button>
        <router-link to="/useTemplateRefsList">useTemplateRefsList</router-link>
      </button>
    </div>
    <div>
      <button>
        <router-link to="/pausableWatch">pausableWatch</router-link>
      </button>
      <button>
        <router-link to="/debouncedWatch">debouncedWatch</router-link>
      </button>
      <button>
        <router-link to="/ignorableWatch">ignorableWatch</router-link>
      </button>
      <button>
        <router-link to="/throttledWatch">throttledWatch</router-link>
      </button>
      <button>
        <router-link to="/until">until</router-link>
      </button>
      <button>
        <router-link to="/watchAtMost">watchAtMost</router-link>
      </button>
    </div>
    <div>
      <button>
        <router-link to="/controlledComputed">controlledComputed</router-link>
      </button>
      <button>
        <router-link to="/controlledRef">controlledRef</router-link>
      </button>
    </div>
  </div>

  <router-view />

  <p></p>
  <Test />
</template>

<script setup lang="ts">
import Test from '@/components/HelloWorld.vue';
</script>

<style>
:root {
  --c-brand: #3eaf7c;
  --c-brand-dark: #30855e;
  --c-brand-active: #37a372;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  display: flex;
  flex-wrap: wrap;
}

#nav > div {
  padding: 8px 16px;
  box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.3);
  margin: 8px;
}

button > a {
  color: #fff;
  text-decoration: none;
  display: block;
}
</style>
